<!DOCTYPE html>
<html>
<head>
  <title>房价计算器</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-widt, initial-scale=1, maximum-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <style type="text/css">
    body, html { padding: 0; margin: 0; }
    #app {
      padding: 20px;
      box-sizing: border-box;
      font-size: 20px;
    }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 10px; vertical-align: middle; }
    .super { vertical-align: super; }
    input { width: 50px; font-size: 20px; }
    .compact-bottom td, .compact-bottom th { padding-bottom: 0; }
    td.desc { color: #999; font-size: 13px; padding-top: 0; }
  </style>
</head>
<body>
  <div id="app">
    <table>
      <tbody>
        <tr>
          <th>总价</th>
          <td><input type="number" v-model="price"/> 万</td>
        </tr>
        <tr>
          <th>面积</th>
          <td><input type="number" v-model="area"/> m<span class="super">2</span></td>
        </tr>
        <tr>
          <th>单价</th>
          <td>{{unitPrice}} 万</td>
        </tr>
        <tr class="compact-bottom">
          <th>额外费用</th>
          <td>{{taxFang}} 万</td>
        </tr>
        <tr>
          <td class="desc" colspan="2">（个1%，契{{(qishuiRate*100).toFixed(1)}}%，中介1.5%）</td>
        </tr>
        <tr class="compact-bottom">
          <th>额外费用</th>
          <td>{{taxOther}} 万</td>
        </tr>
        <tr>
          <td class="desc" colspan="2">（个1%，契{{(qishuiRate*100).toFixed(1)}}%，中介3%）</td>
        </tr>
        <tr>
          <th>中介差额</th>
          <td>{{(taxOther - taxFang).toFixed(2)}} 万</td>
        </tr>
        <tr>
          <th>最终</th>
          <td>{{(price + Number(taxFang)).toFixed(2)}} 万</td>
        </tr>
        <tr>
          <th>最终</th>
          <td>{{(price + Number(taxOther)).toFixed(2)}} 万</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script type="text/javascript">
    var params = location.hash.slice(1).split('&').filter(Boolean)
      .map(str => str.split('='))
      .reduce((res, [k, v]) => (res[k] = v, res), {});
    var view = new Vue({
      el: '#app',
      data: {
        price: Number(params.price) || 140,
        area: Number(params.area) || 90,
      },
      computed: {
        unitPrice: function() {
          return (this.price / this.area).toFixed(3);
        },
        qishuiRate: function() {
          return this.area >= 90 ? 0.015 : 0.01;
        },
        taxFang: function() {
          var geshuiRate = 0.01;
          var zhongjieRate = 0.015;
          return (this.price * (geshuiRate + this.qishuiRate + zhongjieRate)).toFixed(2);
        },
        taxOther: function() {
          var geshuiRate = 0.01;
          var zhongjieRate = 0.03;
          return (this.price * (geshuiRate + this.qishuiRate + zhongjieRate)).toFixed(2);
        },
      },
      watch: {
        price: function() {
          location.hash = `#price=${this.price}&area=${this.area}`;
        },
        area: function() {
          location.hash = `#price=${this.price}&area=${this.area}`;
        },
      }
    })
  </script>
</body>
</html>
